@extends('admin::layouts.master')

@section('content')

    @component('components.tabs',['title'=>'分类管理'])
        @slot('nav')

            <div class="mt-2">
                <a href="" class="btn btn-space btn-primary">分类列表</a>
                <button data-toggle="modal" data-target="#addFenlei" type="button" class="btn btn-space btn-primary">添加分类</button>
            </div>

            {{--模态框--}}
            {{--引入模态框组件开始--}}
            @component('components.modal',['title'=> '添加分类','url'=>route('fenlei.store'),'id'=>'addFenlei','style'=>'block'])
                <div class="modal-body">
                    <div class="form-group">
                        <label>添加新的分类</label>
                        <input type="text" name="fname" placeholder="输入新的分类" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>分类描述</label>
                        <input type="text" name="miaoshu" placeholder="输入新的分类" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>所属的父级分类</label>
                        <select class="form-control select_pid" name="pid">
                            <option value="0" pid="0">顶级分类</option>
                            @foreach($twofenlei as $v)
                                <option value="{{$v['id']}}" pid="{{$v['pid']}}">{{$v['fname']}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group keyong_attr" style="display: none">
                        <label>请为当前分类选择属性</label>
                        <div class="col-12 col-sm-8 col-lg-12">
                            <div class="custom-controls-stacked">
                                @foreach($attr as $v)
                                <label class="custom-control custom-checkbox custom-control-inline">
                                    <input name="attr[]" type="checkbox"  value="{{$v['id']}}"   class="custom-control-input"><span class="custom-control-label">{{$v['aname']}}</span>
                                </label>
                                    @endforeach
                            </div>
                        </div>

                    </div>
                </div>
            @endcomponent
            {{--引入模态框组件结束--}}

        @endslot
        @slot('body')
            <table class="table">
                <thead>
                <tr>
                    <th style="">编号</th>
                    <th style="">分类名称</th>
                    <th>创建时间</th>
                    <th class="actions">操作</th>
                </tr>
                </thead>
                <tbody>
                @foreach($allfenlei as $v)
                    <tr>
                        <td>{{$v['id']}}</td>
                        <td>{!! $v['_fname'] !!}</td>
                        <td>{{$v['created_at']}}</td>
                        <td class="actions">
                            <div class="btn-group btn-space">

                                <button data-toggle="modal" data-target="#editFenlei{{$v['id']}}" type="button" class="btn btn-space btn-success">编辑
                                </button>
                                {{--引入模态框组件开始,此处引入模态框组件，只为了编辑功能--}}
                                @component('components.modal',['title'=> '编辑分类','url'=>route('fenlei.update',$v['id']),'id'=>'editFenlei'.$v['id'],'method'=> 'PUT','style'=>'block'])
                                    <div class="modal-body">

                                        <div class="form-group">
                                            <label>分类编号</label>
                                            <input type="text" readonly name="bianhao" class="form-control" value="{{$v['id']}}">
                                        </div>
                                        <div class="form-group">
                                            <label>更改分类描述</label>
                                            <input type="text"  name="miaoshu" class="form-control" value="{{$v['miaoshu']}}">
                                        </div>
                                        <div class="form-group">
                                            <label>更改分类名称</label>
                                            <input type="text" name="fname" class="form-control" value="{{$v['fname']}}">
                                        </div>
                                        <div class="form-group">
                                            <label>更改所属的父级分类</label>
                                            <select class="form-control select_pid" name="pid">
                                                <option value="0" pid="0">顶级分类</option>
                                                @foreach($twofenlei as $vv)
                                                    <option value="{{$vv['id']}}" pid="{{$vv['pid']}}" @if($vv['id']==$v['pid']) selected @endif>{{$vv['fname']}}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        @if(\Modules\Goods\Entities\FenleiAttr::where('fenlei_id','=',$v['id'])->first())
                                        <div class="form-group keyong_attr">
                                            <label>更改当前分类的父级属性</label>
                                            <div class="col-12 col-sm-8 col-lg-12">
                                                <div class="custom-controls-stacked">
                                                    @foreach($attr as $vv)
                                                        <label class="custom-control custom-checkbox custom-control-inline" style="margin-right: 20px">
                                                            <input name="attr[]" type="checkbox"  value="{{$vv['id']}}" @if(\Modules\Goods\Entities\FenleiAttr::where([['fenlei_id','=',$v['id']],['attr_id','=',$vv['id']]])->first()) checked @endif class="custom-control-input"><span class="custom-control-label  aa">{{$vv['aname']}}</span>
                                                        </label>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                        @endif
                                    </div>
                                @endcomponent
                                {{--引入模态框组件结束--}}


                                <form action="{{route('fenlei.destroy',$v['id'])}}" method="post">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger">删除</button>
                                </form>

                            </div>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        @endslot

    @endcomponent
@endsection
@section('script')
    <script>

        $('.select_pid').change(function () {
            //获取当前选择的值
            var value = $(this).find('option:checked').attr('pid');
            // alert(value);
            //判断当前选择的分类是否为顶级分类，因为限制了可选的分类只有顶级分类，一级分类，和二级分类。如果选择的是顶级分类，那么可用的属性就不显示，如果选择的是一级分类，那么父级id是0，父级id为0那么就不显示可用属性，如果选择的是二级分类，那么就说明父级id为1，即不等于0，就意味着要给当前选择的二级分类来添加新的子级,其实就是添加了三级分类。那么当选择二级分类的时候，就让属性显示出来就可以了
            $('.keyong_attr').find('.aa').removeAttr('checked');
            if (value !=0){
                $('.keyong_attr').show();
            }else{
                $('.keyong_attr').hide();
            }
        })

    </script>
    @endsection